<template>
  <div class="energy-line-bar">
    <div class="energy-line-bar-header">
      <div class="energy-line-bar-header-title">UC</div>
      <div class="energy-line-bar-header-right">
        <div class="right-btn-item" style="color: #00E5FF;">标煤</div>
        <div class="right-btn-item">费用</div>
        <div class="right-img-item"><img :src="settingPng" /></div>
        <div class="right-img-item"><img :src="bigPng" /></div>
      </div>
    </div>
    <div class="energy-line-bar-main">
      <div class="main-title">
        <div class="main-title-item"  v-for="(item, index) in config.legend.data" :key="index">
          <template v-if="item.name">
            <span :style="{width: '10px', height: '10px', display: 'inline-block', 'background-color': item.color, 'border-radius': '50%', 'margin-right': '8px'}"></span>
            <span>{{item.name}}</span>
          </template>
        </div>
      </div>
      <dv-charts :option="config" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnergyLineBarCmp',
  props:["title"],
  data () {
    return {
      bigPng: require("../../assets/big.png"),
      settingPng: require("../../assets/setting.png"),
      config:  {
        grid: {
          top: '20px',
          left: '10px',
          right: '10px',
          bottom: '12px',
          containLabel: true,
        },
        legend: {
          show: false,
          data: [
            {
              name: '',
              color: '#00FF29'
            },
            {
              name: '目标UC',
              color: '#14E0FF'
            },
            {
              name: '实际UC',
              color: '#FFB300'
            }
          ]
        },
        xAxis: {
          data: ['YTD', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05'],
          axisLabel: {
            style: {
            fill: '#FFF',
            fontSize: 12,
            rotate: 0
          }
          }
        },
        yAxis: [
          {
            name: '',
            data: 'value',
            min: 0,
            max: 5,
            interval: 1,
            axisLabel: {
              style: {
                fill: '#FFFFFF',
                fontSize: 12,
                rotate: 0
              }
            },
            scale: true, //自适应
          },
          {
            name: '',
            data: 'value',
            position: 'right',
            // max: 5,
            // splitLine: {
            //   show: false
            // }
            scale: true, //自适应
            min: 0,
            max: 5,
            interval: 1,
            splitLine: {
              style: {
                stroke: '#182A41',
                lineWidth: 1
              }
            },
            axisLabel: {
              style: {
                fill: '#FFFFFF',
                fontSize: 12,
                rotate: 0
              }
            }
          }
        ],
        series: [
          {
            name: '目标UC',
            data: ['', 1, 2, 3.5, 3.8, 2.5],
            type: 'line',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['rgba(185, 190, 166, 0.2)', 'rgba(219, 137, 14, 0.2)']
            },
            // lineStyle: {
            //   stroke: 'rgba(251, 114, 147, 1)',
            //   lineDash: [3, 3]
            // },
            // linePoint: {
            //   style: {
            //     stroke: 'rgba(251, 114, 147, 1)'
            //   }
            // },
            // yAxisIndex: 1
            
          },
          {
            name: ' 实际UC',
            data: ['', 2.8, 1.8, 2, 0.5, 1.5],
            type: 'line',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)']
            },
            // lineStyle: {
            //   stroke: 'rgba(251, 114, 147, 1)',
            //   lineDash: [3, 3]
            // },
            // linePoint: {
            //   style: {
            //     stroke: 'rgba(251, 114, 147, 1)'
            //   }
            // },
            // yAxisIndex: 1
          },
          {
            name: '',
            data: [4.5],
            type: 'bar',
            backgroundBar: {
              show: false
            },
            barWidth: "20%",
            gradient: {
              color: ['#00FF29', '#00FF29']
            },
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.energy-line-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: rgba(15,47,92,0.2);

  .energy-line-bar-header {
    height: 40px;
    background: rgba(21,56,99,0.4);
    font-size: .12rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .energy-line-bar-header-title {
      margin: 8px 20px;
      font-weight: bold;
      font-size: .225rem;
      font-family: YouSheBiaoTiHei;
      color: #FFFFFF;
      font-style: italic;
    }

    .energy-line-bar-header-right {
      display: flex;
      flex-direction: row;
      margin-right: 15px;

      .right-btn-item {
        font-size: .175rem;
        vertical-align: center; 
        padding: 5px 11px;
        font-family: HarmonyOS_Sans_SC;
        background: rgba(255,255,255,0.14);
        border-radius: 6px;
        margin-right: 10px;
      }

      .right-img-item {
        display: flex;
        align-items: center;
        font-size: .175rem;
        font-family: HarmonyOS_Sans_SC;
        margin-left: 15px;
      }
    }
  }
  .energy-line-bar-main {
    flex: 1;
    display: flex;
    position: relative;

    .main-title {
      position: absolute;
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: center;
      top: 10px;

      .main-title-item {
        margin-left: 15px;
      }
    }
  }
}
</style>
